<%--@elvariable id="basePath" type=""--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<%-- 静态包含 base标签、css样式、jQuery文件 --%>
		<%@ include file="/pages/common/head.jsp"%>
		<script type="text/javascript">
			// 页面加载完成之后
			$(function () {
				$("#username").blur(function () {
					//1 获取用户名
					var username = this.value;
					$.getJSON("http://localhost:8080/book/userServlet","action=ajaxExistsUsername&username=" + username,function (data) {
						if (data.existsUsername) {
							$("span.errorMsg").text("用户名已存在！");
						} else {
							$("span.errorMsg").text("用户名可用！");
						}
					});
				});
				// 给验证码的图片，绑定单击事件
				$("#code_img").click(function () {
					// 在事件响应的function函数中有一个this对象。这个this对象，是当前正在响应事件的dom对象
					// src属性表示验证码img标签的 图片路径。它可读，可写
					// alert(this.src);
					this.src = "${basePath}kaptcha.jpg?d=" + new Date();
				});
				// 给注册绑定单击事件
				$("#sub_btn").click(function () {
					// 验证用户名：必须由字母、数字和下划线组成，并且长度为5到12位
					//1 获取用户名输入框里的内容
					var usernameText = $("#username").val();
					//2 创建正则表达式对象
					var usernamePatt = /^\w{5,12}$/;
					//3 使用test方法验证
					if (!usernamePatt.test(usernameText)) {
						//4 提示用户结果
						$("span.errorMsg").text("用户名不合法！");
						return false;
					}
					// 验证密码：必须由字母、数字和下划线组成，并且长度为5到12位
					//1 获取用户名输入框里的内容
					var passwordText = $("#password").val();
					//2 创建正则表达式对象
					var passwordPatt = /^\w{5,12}$/;
					//3 使用test方法验证
					if (!passwordPatt.test(passwordText)) {
						//4 提示用户结果
						$("span.errorMsg").text("密码不合法！");
						return false;
					}
					// 验证确认密码：和密码相同
					//1 获取确认密码内容
					var repwdText = $("#repwd").val();
					//2 和密码相比较
					if (repwdText != passwordText) {
						//3 提示用户
						$("span.errorMsg").text("确认密码和密码不一致！");
						return false;
					}
					// 邮箱验证：xxxxx@xxx.com
					//1 获取邮箱里的内容
					var emailText = $("#email").val();
					//2 创建正则表达式对象
					var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
					//3 使用test方法验证是否合法
					if (!emailPatt.test(emailText)) {
						//4 提示用户
						$("span.errorMsg").text("邮箱格式不合法！");
						return false;
					}
					// 验证码：这只需要验证用户已输入。
					var codeText = $("#code").val();
					//去掉验证码前后空格
					// alert("去空格前：["+codeText+"]")
					codeText = $.trim(codeText);
					// alert("去空格后：["+codeText+"]")
					if (codeText == null || codeText == "") {
						//4 提示用户
						$("span.errorMsg").text("验证码不能为空！");
						return false;
					}
					// 去掉错误信息
					$("span.errorMsg").text("");
				});
			});
		</script>
	<style type="text/css">
		.login_form{
			height:420px;
			margin-top: 25px;
		}
	</style>
	</head>
	<body>

	<div id="header0">
		<img alt="loading" src="static/img/beauty.jpg" width="120px" height="100px"  align="middle" style="margin-top: -12px;cursor: pointer;border-radius: 5px">&nbsp;&nbsp;
		<a href="pages/user/first_page.jsp">首页</a>&nbsp;
		<a href="#">热销</a>&nbsp;
		<%--如果用户还没有登录,显示【登录和注册的菜单】 --%>
		<c:if test="${empty sessionScope.user}">
			<a style="color: white" href="pages/user/regist.jsp">注册</a>&nbsp;
			<a href="pages/user/login.jsp">登录</a>&nbsp;
		</c:if>
		<!--
		<%--如果已经登录，则显示登录成功之后的用户信息。--%>
		<c:if test="${not empty sessionScope.user}">
			<a href="userServlet?action=logout">注销</a>&nbsp;&nbsp;
			<a href="orderServlet?action=list">我的订单</a>&nbsp;
			<a href="manager/bookServlet?action=list">游戏管理</a>&nbsp;
		</c:if>--%>
		-->
		<a href="pages/cart/cart.jsp">购物车</a>&nbsp;
	</div>

				<div id="content">

					<div class="tishiyu">
						<span class="errorMsg">
						${ requestScope.msg }
						</span>
					</div>

					<div class="login_form">
						<h1 style="color: white;margin-left: 18px;font-weight: normal">创建您的账户</h1>
						<div class="login_box">
							<div class="form">
								<form action="userServlet" method="post">
									<input type="hidden" name="action" value="regist">
									<label>账户名称：</label><br><label for="username"></label>
									<input class="itxt" type="text" value="${requestScope.username}"
										   name="username" id="username"/>
									<br/>
									<br/>
									<label>选择密码：</label><br><label for="password"></label>
									<input class="itxt" type="password"
										   name="password" id="password" />
									<br/>
									<br/>
									<label>确认密码：</label><br>	<label for="repwd"></label>
									<input class="itxt" type="password"
										   name="repwd" id="repwd" />
									<br/>
									<br/>
									<label>电子邮件：</label><br><label for="email"></label>
									<input class="itxt" type="text"  value="${requestScope.email}"
										   name="email" id="email" />
									<br/>
									<br/>
									<label>验证码：</label><br><label for="code"></label>
									<input type="text" name="code" style="width: 100px;height:27px;background-color: #bdbdbd" id="code" autocomplete="off"/>
									<img id="code_img" alt="loading" src="kaptcha.jpg" style="position:relative;top:10px;margin-left: 45px; width: 110px; height: 32px;">
									<br/>
									<br/>
									<input type="submit" value="&nbsp;完&nbsp;成&nbsp;" class="button" />
								</form>
							</div>

						</div>


					</div>
				</div>
	</body>
</html>